<template>
  <div class="t-dis">
    <div style="padding: 0px 15px 0 15px">
      
      <div class="vol-form-item" style="margin: 10px 0px">
       
            <div class="grid-content">
              <el-button
              type="primary"
              class="edit_btn"
              @click.native="getExport"
              style="font-size: 15px; float: right" 
            >
              <i class="el-icon-download"></i
              >&nbsp;&nbsp;&nbsp;导出</el-button
            >

            </div>
      </div>
    </div>
    <div class="example-tb">
      <div class="tb">
        <vol-table
        ref="table"
        :columns="columns"
        :max-height="680"
        :columnIndex="false"
        :ck="false"
        :text-inline="false"
        :single="true"
        :tableData="tableData"
        :paginationHide="false"
        @loadBefore="loadTableBefore"
        @loadAfter="loadTableAfter"
         url="/api/sh_progress/GetData"
         :override="true"
      ></vol-table>

      </div>
      <br />
     
    </div>
  </div>
</template>
<script>
import VolForm from "@/components/basic/VolForm.vue";
import VolHeader from "@/components/basic/VolHeader.vue";
//import table2 from "@/views/tables/applyauttable";

import VolTable from "@/components/basic/VolTable.vue";
export default {
  components: {
    VolTable,
    VolHeader,
  },
  methods: {
    btnSeach() {
      this.$refs.table.load();
    },
    getExport() {
    var param = {};
    console.log('*****************')
    this.http
      .post("/api/sh_progress/ExportFile", param, true, {
        responseType: "blob",
      })
      .then((result) => {
        let now = new Date();
        let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
        let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        let today = now.getDate(); //获取当前日(1-31)
        let hour = now.getHours(); //获取当前小时数(0-23)
        let minute = now.getMinutes(); //获取当前分钟数(0-59)
        let second = now.getSeconds(); //获取当前秒数(0-59)

        const elink = document.createElement("a");
        elink.download = year +""+ month +""+ today +""+ hour +""+ minute +""+ second;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(result);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href);
        document.body.removeChild(elink);
      });
  },
    loadTableBefore(param, callBack) {
      //生成查询条件
      param.wheres = [
        //设置为like模糊查询
        {
          name: "sq_sj",
          value: this.searchFields.sq_sj,
        },
        {
          name: "sh_sj",
          value: this.searchFields.sh_sj,
        },
        {
          name: "shzt",
          value: this.searchFields.shzt,
        },
        {
          name: "xzq",
          value: this.searchFields.xzq,
        },
      ];
      callBack(true); //此处必须进行回调，返回处理结果，如果是false，则不会执行后台查询
    },
    loadTableAfter(data, callBack) {
      //此处是从后台加数据后，你可以在渲染表格前，预先处理返回的数据
      callBack(true); //同上
    },
  },
  created() {
    this.http.get("/api/sys_department/GetRegion", {}, true).then((x) => {
      if (!x.Status) {
        return this.$message(x.message);
      }
      this.xzqoptions.push(x.Data[0]);
    });
  },
  mounted() {},
  data() {
    return {
    loadKey: true,
    searchFields: {
      sq_sj: "",
      sh_sj: "",
      shzt: "",
    },
    currentRow: "",
    pageindex: 1,
    pagesize: 30,
    total:0,
    width: "90%",
    title: "测试",
    detailParams: "",
    text: "",
    tableData: [],
    columns: [
        //表配置
        {
          field: "data_id", //数据库表字段,必须和数据库一样，并且大小写一样
          type: "string", //数据类型
          isKey: true, //是否为主键字段
          width: 20, //表格宽度
          hidden: true, //是否显示
          readonly: true,
          require: true,
          align: "left", //文字显示位置left、center
        },
        {
          field: "idxx",
          title: "序号",
          type: "string",
          width: 50,
          align: "center",
        },
        {
          field: "citymc",
          title: "任务地市",
          type: "string",
          width: 100,
          align: "center",
        },
    
        {
          field: "sqcs",
          title: "申请次数",
          type: "string",
          width: 80,
          align: "center",
        },
        {
          field: "create_time",
          title: "申请时间",
          type: "datetime",
          align: "center",
          width: 180,
        },
        {
          field: "jycs",
          title: "交验次数",
          type: "string",
          align: "center",
          width: 80,
        },
        {
          field: "shzt",
          title: "审核状态",
          type: "string",
          width: 80,
          align: "center",
          edit: { type: "switch", keep: true }, //keep始终开启编辑状态
          render: (h, { row, column, index }) => {
          console.log("row", row.shzt);
            if (row.shzt == "已通过") {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--success el-tag--light"],
                    },
                    "已通过"
                  ),
                ]),
              ]);
            }else if(row.shzt=="未审核")
            {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--warning el-tag--light"],
                    },
                    "待审核"
                  ),
                ]),
              ]);
            }else if(row.shzt=="不通过")
            {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--danger el-tag--light"],
                    },
                    "不通过"
                  ),
                ]),
              ]);
            }
          },
        },
        {
          field: "yjfkdate",
          title: "意见反馈时间",
          type: "datetime",
          align: "center",
          width: 180,
        },
        {
          field: "sh_time",
          title: "审核时间",
          type: "datetime",
          align: "center",
          width: 180,
        },
        {
          field: "xxtj_time",
          title: "线下提交时间",
          type: "date",
          align: "center",
          width:180,
          edit: { type: "date" },
          render: (h, { row, column, index }) => {
            let currentDate = new Date();
            let year = currentDate.getFullYear();
            let month = currentDate.getMonth() + 1;  // 注意月份从0开始，需要加1
            let day = currentDate.getDate();
            console.log(currentDate)
            if (new Date(row.xxtj_time) <= new Date(year+"-"+month+"-"+day)) {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: [""],
                    },
                    row.xxtj_time
                  ),
                ]),
              ]);
            }else  if (new Date(row.xxtj_time) > new Date(year+"-"+month+"-"+day)) {
            {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--danger el-tag--light"],
                    },
                    row.xxtj_time
                  ),
                ]),
              ]);
            }
          }
          },
        },
        {
          field: "xxtj_state",
          title: "提交状态",
          type: "string",
          align: "center",
          render: (h, { row, column, index }) => {
            if (row.xxtj_state == "已交验") {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--success el-tag--light"],
                    },
                    "已交验"
                  ),
                ]),
              ]);
            }else
            {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--info el-tag--light"],
                    },
                    "未交验"
                  ),
                ]),
              ]);
            }
          },
        },
        {
          field: "accept_state",
          title: "验收状态",
          type: "int",
          align: "center",
          width: 120,
          render: (h, { row, column, index }) => {
            if (row.accept_state == "已通过") {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--success el-tag--light"],
                    },
                    "已通过"
                  ),
                ]),
              ]);
            }else if(row.accept_state=="正在验收中")
            {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--warning el-tag--light"],
                      style:"--el-tag-text-color:#409EFF;--el-tag-bg-color:rgb(217, 236, 255);--el-tag-border-color:rgb(217, 236, 255)"
                    },
                    "正在验收中"
                  ),
                ]),
              ]);
            }else if(row.accept_state=="不通过")
            {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--danger el-tag--light"],
                    },
                    "不通过"
                  ),
                ]),
              ]);
            }else
            {
              return h("div", { style: {} }, [
                h("div", {}, [
                  h(
                    "span",
                    {
                      class: ["el-tag el-tag--info el-tag--light"],
                    },
                    "未开始验收"
                  ),
                ]),
              ]);
            }
          },
        },
        {
          field: "startdate",
          title: "开始验收时间",
          type: "string",
          align: "center",
          width: 180,
        }, {
          field: "enddate",
          title: "验收完成时间",
          type: "string",
          align: "center",
          width: 180,
        },
       
        {
          field: "UserTrueName",
          title: "申请人",
          type: "string",
          align: "center",
          width: 250,
        },
        {
          field: "WorkUnit",
          title: "申请单位",
          type: "string",
          align: "center",
          width: 250,
        },
       
       
     
      ],

    };
  },
};
</script>
<style lang="less" scoped>
.example-tb {
  padding: 15px; overflow: auto;
}
.tb {
  margin-top: 15px;
}
.v-header {
  background: white;
  padding: 10px;
}
.t-dis {
  margin-bottom: 15px;
  background: white;
}
.t-dis ::v-deep(.example-tb .el-alert) {
  display: none;
}
.t-dis ::v-deep(.example-tb .tb) {
  margin-top: 0 !important;
}
.t-dis ::v-deep(.example-tb .search-info) {
  margin-left: -19px;
}
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.edit_btn {
  min-height: 40px;
  min-width: 100px;
  background: #409eff 80%;
  border: #409eff;
  font-size: 20px;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
// or
.el-scrollbar {
  .el-scrollbar__wrap {
    overflow-x: hidden;
    .el-scrollbar__view {
    }
  }
}
</style>
